<template>
  <div class="overlay-wrapper" v-if="visibleOverlay">
    <div class="inner">
      <div class="inner-box">
        <div class="img-wrapper">
          <img :src="imgUrl" alt />
        </div>
        <p class="status">{{applyTipText1}}</p>
        <p class="desc">{{applyTipText2}}</p>
      </div>
      <span class="close" @click="close"></span>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    imgUrl: {
      type: String,
      default: ""
    },
    applyTipText1: {
      type: String,
      default: "系统审核中"
    },
    applyTipText2: {
      type: String,
      default: "系统审核中"
    },
    desc: {
      type: String,
      default: "您已经提交申请，三个工作日内答复"
    }
  },
  data() {
    return {
      visibleOverlay: false
    };
  },
  methods: {
    show() {
      this.visibleOverlay = true;
    },
    close() {
      this.visibleOverlay = false;
    }
  }
};
</script>
<style lang="less" scoped>
.overlay-wrapper {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.2);
  .inner {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    .inner-box {
      width: 13.12rem;
      height: 8.7rem;
      background: rgba(255, 255, 255, 1);
      border-radius: 0.2rem;
      padding: 1.5rem 0;
      box-sizing: border-box;
      .img-wrapper {
        border-radius: 0.2rem;
        overflow: hidden;
        width: 2.68rem;
        height: 2.68rem;
        background: rgba(189, 158, 107, 1);
        box-shadow: 5px 5px 5px 5px rgba(189, 158, 107, 0.41);
        border-radius: 50%;
        margin: 0 auto;
        img {
          height: 100%;
        }
      }
      p {
        text-align: center;
        &.status{
          font-size: 0.64rem;
          font-family: PingFang SC;
          font-weight: 400;
          color: rgba(68, 68, 68, 1);
          text-align: center;
          margin-top: 0.9rem;
        }
        &.desc {
          font-size: 0.56rem;
          font-family: PingFang SC;
          font-weight: 400;
          color: rgba(153, 153, 153, 1);
          text-align: center;
          margin-top: 0.62rem;
        }
      }
    }

    .close {
      width: 1.2rem;
      height: 1.2rem;
      border-radius: 50%;
      background: url("./../../assets/represent/close.png") no-repeat;
      background-size: cover;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: -2rem;
    }
  }
}
</style>